<template>
  <view class="user-container">
    <!-- 顶部标题 -->


    <!-- 用户信息区域 -->
    <view class="user-info">
      <image v-if="userInfo && userInfo.avatarUrl" :src="userInfo.avatarUrl" class="avatar" mode="aspectFill"></image>
      <image v-else-if="userInfo && userInfo.headImgUrl" :src="userInfo.headImgUrl" class="avatar"></image>
      <view v-else class="avatar default-avatar">
        <text class="question-mark">?</text>
      </view>
      <text class="username">{{ userInfo ? userInfo.username || userInfo.nickname : '小荷爱健康3128' }}</text>
      <text class="phone">{{ userInfo ? userInfo.phone : '您还未登录' }}</text>
    </view>

    <!-- 就诊人按钮组 -->
    <view class="patient-buttons">
      <view class="button">
        <text class="iconfont icon-user-group">👥</text>
        <text>常用就诊人(0)</text>
      </view>
      <view class="button">
        <text class="iconfont icon-medical-record">📋</text>
        <text>就诊病历管理</text>
      </view>
    </view>

    <!-- 新用户专享区域 -->
    <view class="promo-card">
      <view class="promo-header">
        <text class="title">新用户专享</text>
        <view class="action">
          <text>问诊6折起，甄选5元代金券</text>
          <button class="claim-btn">立即领取</button>
        </view>
      </view>
      <view class="promo-items">
        <view class="promo-item">
          <text class="iconfont icon-quick">⚡</text>
          <text class="name">快速问诊</text>
          <text class="desc">5元特惠</text>
        </view>
        <view class="promo-item">
          <text class="iconfont icon-expert">👨‍⚕️</text>
          <text class="name">专家问诊</text>
          <text class="desc">首单问诊6折</text>
        </view>
        <view class="promo-item">
          <text class="iconfont icon-select">🏆</text>
          <text class="name">微医甄选</text>
          <text class="desc">新人领5元代金券</text>
        </view>
      </view>
    </view>

    <!-- 订单类型 -->
    <view class="order-section">
      <text class="section-title">我的订单</text>
      <view class="order-types">
        <view class="order-type">
          <text class="iconfont icon-chat">💬</text>
          <text>问诊订单</text>
        </view>
        <view class="order-type" @click="goToSetmealOrders">
          <text class="iconfont icon-prescription">📝</text>
          <text>套餐订单</text>
        </view>
        <view class="order-type" @tap="goToPharmacyOrders">
          <text class="iconfont icon-pharmacy">💊</text>
          <text>药品订单</text>
        </view>
        <view class="order-type">
          <text class="iconfont icon-more">💉</text>
          <text>疫苗订单</text>
        </view>
    </view>
  </view>

  <!-- 健康币和优惠券 -->
  <view class="wallet-section">
    <view class="wallet-item">
      <text class="iconfont icon-coin">🪙</text>
      <text class="amount">0</text>
      <text class="label">健康币</text>
      <text class="tag">去签到+10</text>
    </view>
    <view class="divider"></view>
    <view class="wallet-item">
      <text class="iconfont icon-coupon">🎫</text>
      <text class="amount">0</text>
      <text class="label">优惠券</text>
    </view>
  </view>

  <!-- 服务工具 -->
  <view class="tools-section">
    <text class="section-title">服务与工具</text>
    <view class="tools-grid">
      <view class="tool-item">
        <text class="iconfont icon-star">⭐</text>
        <text>收藏</text>
      </view>
      <view class="tool-item">
        <text class="iconfont icon-doctor">👨‍⚕️</text>
        <text>我的医生</text>
      </view>
      <view class="tool-item">
        <text class="iconfont icon-calendar">📅</text>
        <text>随访计划</text>
      </view>
      <view class="tool-item">
        <text class="iconfont icon-service">🎧</text>
        <text>客服中心</text>
      </view>
      <view class="tool-item">
        <text class="iconfont icon-cooperation">🤝</text>
        <text>商务合作</text>
      </view>
      <view class="tool-item" @tap="goToAddress">
        <text class="iconfont icon-address">📍</text>
        <text>地址管理</text>
      </view>
    </view>
  </view>

  <!-- 退出登录按钮 -->
  <view class="logout-section" v-if="userInfo">
    <button class="logout-btn" @tap="handleLogout">退出登录</button>
  </view>
  </view>
</template>

<script>
import { userApi } from '@/api/user'

export default {
  data() {
    return {
      userInfo: null
    }
  },

  onShow() {
    // 每次显示页面时获取最新的用户信息
    this.getUserInfo()
  },

  methods: {
    getUserInfo() {
      const userInfo = uni.getStorageSync('userInfo')
      if (userInfo) {
        this.userInfo = userInfo
      } else {
        this.userInfo = null
      }
    },

    goToEditProfile() {
      if (!this.userInfo) {
        this.checkLogin()
        return
      }
      this.navigateTo('/pages/user/edit-profile')
    },

    goToOrders() {
      if (!this.userInfo) {
        this.checkLogin()
        return
      }
      this.navigateTo('/pages/orders/orders')
    },

    goToMedicalRecords() {
      if (!this.userInfo) {
        this.checkLogin()
        return
      }
      this.navigateTo('/pages/medical-records/medical-records')
    },

    goToHealthFiles() {
      if (!this.userInfo) {
        this.checkLogin()
        return
      }
      this.navigateTo('/pages/health-files/health-files')
    },

    goToAddress() {
      if (!this.userInfo) {
        this.checkLogin()
        return
      }
      uni.navigateTo({
        url: '/pages/address/address-list'
      })
    },

    goToPharmacyOrders() {
      if (!this.userInfo) {
        this.checkLogin()
        return
      }
      uni.navigateTo({
        url: '/pages/order/order-list',
        fail: (err) => {
          console.error('跳转药品订单列表失败:', err)
          uni.showToast({
            title: '跳转失败，请重试',
            icon: 'none'
          })
        }
      })
    },

    checkLogin() {
      uni.showModal({
        title: '提示',
        content: '请先登录',
        success: (res) => {
          if (res.confirm) {
            this.navigateTo('/pages/login/login')
          }
        }
      })
    },

    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除本地存储的用户信息和token
            uni.removeStorageSync('userInfo')
            uni.removeStorageSync('token')
            this.userInfo = null

            uni.showToast({
              title: '退出成功',
              icon: 'success'
            })

            // 延迟跳转到登录页
            setTimeout(() => {
              this.navigateTo('/pages/login/login')
            }, 1500)
          }
        }
      })
    },

    goToSetmealOrders() {
      uni.navigateTo({
        url: '/pages/order/setmeal-orders',
        fail: (err) => {
          console.error('跳转失败：', err)
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.user-container {
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: 120rpx;

  .header {
    padding: 40rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 36rpx;
      font-weight: 500;
      color: #333;
    }

    .header-right {
      display: flex;
      gap: 20rpx;

      .iconfont {
        font-size: 40rpx;
        color: #666;
      }
    }
  }

  .user-info {
    padding: 20rpx 0 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;

    .avatar {
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
      margin-bottom: 20rpx;
      border: 4rpx solid #fff;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    }

    .default-avatar {
      background: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;

      .question-mark {
        font-size: 60rpx;
        color: #999;
      }
    }

    .username {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 8rpx;
    }

    .phone {
      font-size: 28rpx;
      color: #666;
    }
  }

  .patient-buttons {
    padding: 20rpx 30rpx;
    display: flex;
    gap: 20rpx;
    background: #fff;

    .button {
      flex: 1;
      height: 80rpx;
      background: #f5f5f5;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10rpx;

      .iconfont {
        font-size: 32rpx;
        color: #666;
      }

      text {
        font-size: 26rpx;
        color: #333;
      }
    }
  }

  .promo-card {
    margin: 20rpx;
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    .promo-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;

      .title {
        font-size: 30rpx;
        font-weight: 500;
        color: #333;
      }

      .action {
        display: flex;
        align-items: center;
        gap: 16rpx;

        text {
          font-size: 24rpx;
          color: #666;
        }

        .claim-btn {
          background: #ff6b00;
          color: #fff;
          font-size: 24rpx;
          padding: 8rpx 24rpx;
          border-radius: 24rpx;
          border: none;
        }
      }
    }

    .promo-items {
      display: flex;
      justify-content: space-between;

      .promo-item {
        flex: 1;
        text-align: center;

        .iconfont {
          font-size: 48rpx;
          margin-bottom: 12rpx;
          display: block;
        }

        .name {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 8rpx;
          display: block;
        }

        .desc {
          font-size: 24rpx;
          color: #ff6b00;
        }
      }
    }
  }

  .order-section {
    margin: 20rpx;
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    .section-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 30rpx;
      display: block;
    }

    .order-types {
      display: flex;
      justify-content: space-between;

      .order-type {
        text-align: center;

        .iconfont {
          font-size: 48rpx;
          color: #4a90e2;
          margin-bottom: 12rpx;
          display: block;
        }

        text {
          font-size: 26rpx;
          color: #333;
        }
      }
    }
  }

  .wallet-section {
    margin: 20rpx;
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    .wallet-item {
      flex: 1;
      text-align: center;
      position: relative;

      .iconfont {
        font-size: 36rpx;
        color: #666;
        margin-bottom: 8rpx;
      }

      .amount {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin: 0 8rpx;
      }

      .label {
        font-size: 26rpx;
        color: #666;
      }

      .tag {
        position: absolute;
        top: -16rpx;
        right: 20rpx;
        background: #ff6b00;
        color: #fff;
        font-size: 20rpx;
        padding: 4rpx 12rpx;
        border-radius: 12rpx;
      }
    }

    .divider {
      width: 2rpx;
      height: 60rpx;
      background: #eee;
      margin: 0 40rpx;
    }
  }

  .tools-section {
    margin: 20rpx;
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    .section-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 30rpx;
      display: block;
    }

    .tools-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30rpx;

      .tool-item {
        text-align: center;

        .iconfont {
          font-size: 48rpx;
          color: #4a90e2;
          margin-bottom: 12rpx;
          display: block;
        }

        text {
          font-size: 26rpx;
          color: #333;
        }
      }
    }
  }

  .logout-section {
    margin: 40rpx 20rpx;
    padding: 0 30rpx;

    .logout-btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      background: #fff;
      color: #ff4d4f;
      font-size: 32rpx;
      border-radius: 44rpx;
      border: none;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style>
